<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>
<script type="text/javascript" src="${ctx }/js/jquery-ui-1.8.17.custom.min.js" charset="UTF-8"></script>

<script type="text/javascript" src="/pmgr/css/jquery/i18n/jquery.ui.datepicker-ko.js"></script>

<link rel="stylesheet" href="/pmgr/css/jquery/themes/ui-lightness/jquery.ui.all.css">

<style>
<!--
  .showP{
    border-top-style:dashed; 
    border-bottom-style:dashed; 
    border-right-style:dashed; 
    border-left-style:dashed; 
    } 
-->
</style>

<script type="text/javascript">
alert(23);
var rooms = [];
<c:if test="${rooms !=null && fn:length(rooms)>0 }">
	<c:forEach var="map" items="${rooms}" varStatus="status">
	rooms.push({
		pr_no:"${map.pr_no}",
// 		p_id:"${map.pr_no}",
		room_nm: "${map.room_nm}",
		x_cood:"${map.x_cood}",
		y_cood:"${map.y_cood}",
		fromto:"${map.fromto}",
		rm_status:"${map.rm_status}",
		use_yn:"${map.use_yn}",
		pm_pay:"${map.pm_pay}",
		busy_type:"${map.busy_type}",
		use_man_cnt:"${map.use_man_cnt}",
		use_max_cnt:"${map.use_max_cnt}",
		pm_per:"${map.pm_per}",
		pm_dc_m:"${map.pm_dc_m}",
		busy_1_base:"${map.busy_1_base}000",
		busy_1_fri :"${map.busy_1_fri }000",
		busy_1_sat :"${map.busy_1_sat }000",
		busy_2_base:"${map.busy_2_base}000",
		busy_2_fri :"${map.busy_2_fri }000",
		busy_2_sat :"${map.busy_2_sat }000",
		busy_3_base:"${map.busy_3_base}000",
		busy_3_fri :"${map.busy_3_fri }000",
		busy_3_sat :"${map.busy_3_sat }000",
		chk_yn :""
		});

	</c:forEach>
</c:if>
var roomIdx="";
$(document).ready(function(){
	showPoint();
});

function setRoom(idx){
	roomIdx = idx;
}

//화면에 숙박 설정 그리기
function showPoint(){
	$(".delPoint").remove();
	
	var html="";
	var reservationHtml ="";
	for(var i=0; i<rooms.length;i++){
		var map = rooms[i];
		var xCoord= Number(map.x_cood);
		var yCoord= Number($("#back_img").offset().top) + Number(map.y_cood);
		if(Number($("#gigan").val()) > Number(map.fromto)){
			html+="<div id='pointImg_"+map.pr_no+"' onclick=\"reservationAdd('"+map.pr_no+"','N');\" class='delPoint' style=\"position: absolute;top: "+yCoord+"px;left:"+xCoord+"px;\"><img src=\"/usr/images/sim_3.png\" style=\"opacity:.8;filter:alpha(opacity=80);\"/></div>";
		}else{
			if("Y"==map.chk_yn){
				html+="<div id='pointImg_"+map.pr_no+"' onclick=\"reservationAdd('"+map.pr_no+"','Y');\" class='delPoint' style=\"position: absolute;top: "+yCoord+"px;left:"+xCoord+"px;\"><img src=\"/usr/images/sim_4.png\" style=\"opacity:.8;filter:alpha(opacity=80);\"/></div>";
				var busy_type = map.busy_type;
				var pm_per = map.pm_per;
				var pm_dc_m = map.pm_dc_m;
				var sugiImg1= "";
				var sugiImg2= "";
				var sugiImg3= "";
				
				if(""==busy_type){
// 					alert("22");
					//일반
					var nDt = new Date();
					nDt.set({year:${fn:substring(reservation_dt,0,4)},month:(Number(${fn:substring(reservation_dt,4,6)})-1),day:Number(${fn:substring(reservation_dt,6,8)})});

					var dayName_ = nDt.toString("ddd");
					busy_type='0101'
					if('Fri'==dayName_){
						busy_type=='0102';
					}
					if('Sat'==dayName_){
						busy_type=='0103';
					}
				}
				
				sugiImg1 = sugiImg2 =sugiImg3 = 
					"		<table  style=\"width: 100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"+
					"			<tr>";
				//할인 있을경우
				if("0" !=pm_per || "0" != pm_dc_m){
					sugiImg1 +="				<td class=\"lineBottom\"><s>";
					sugiImg2 +="				<td class=\"lineBottom\"><s>";
					sugiImg3 +="				<td class=\"lineBottom\"><s>";
				}else{
					sugiImg1 +="				<td class=\"lineNone\">";
					sugiImg2 +="				<td class=\"lineNone\">";
					sugiImg3 +="				<td class=\"lineNone\">";
				}
				if(busy_type=='0101'){
					sugiImg1+="<span class='sendPayColor'>";
				}else if(busy_type=='0102'){
					sugiImg2+="<span class='sendPayColor'>";
				}else if(busy_type=='0103'){
					sugiImg3+="<span class='sendPayColor'>";
				}else if(busy_type=='0104'){
					sugiImg1+="<span class='sendPayColor'>";
				}else if(busy_type=='0105'){
					sugiImg2+="<span class='sendPayColor'>";
				}else if(busy_type=='0106'){
					sugiImg3+="<span class='sendPayColor'>";
				}else if(busy_type=='0107'){
					sugiImg1+="<span class='sendPayColor'>";
				}else if(busy_type=='0108'){
					sugiImg2+="<span class='sendPayColor'>";
				}else if(busy_type=='0109'){
					sugiImg3+="<span class='sendPayColor'>";
				}
				if(busy_type=='0101' || busy_type=='0102' || busy_type=='0103'){//비수기
					sugiImg1+="<img alt=\"\" src=\"/camping/img/charge_bisu.jpg\" style=\"vertical-align: middle;\"> "+$.comma(map.busy_1_base)+"원";
					sugiImg2+="<img alt=\"\" src=\"/camping/img/charge_bisu.jpg\" style=\"vertical-align: middle;\"> "+$.comma(map.busy_1_fri)+"원";
					sugiImg3+="<img alt=\"\" src=\"/camping/img/charge_bisu.jpg\" style=\"vertical-align: middle;\"> "+$.comma(map.busy_1_sat)+"원";

				}else if(busy_type=='0104' |busy_type=='0105' || busy_type=='0106'){//준수기

					sugiImg1+="<img alt=\"\" src=\"/camping/img/charge_junsung.jpg\" style=\"vertical-align: middle;\"> "+$.comma(map.busy_2_base)+"원";
					sugiImg2+="<img alt=\"\" src=\"/camping/img/charge_junsung.jpg\" style=\"vertical-align: middle;\"> "+$.comma(map.busy_2_fri)+"원";
					sugiImg3+="<img alt=\"\" src=\"/camping/img/charge_junsung.jpg\" style=\"vertical-align: middle;\"> "+$.comma(map.busy_2_sat)+"원";

				}else if(busy_type=='0107'||busy_type=='0108'||busy_type=='0109'){//성수기

					sugiImg1+="<img alt=\"\" src=\"/camping/img/charge_sungsu.jpg\" style=\"vertical-align: middle;\"> "+$.comma(map.busy_3_base)+"원";
					sugiImg2+="<img alt=\"\" src=\"/camping/img/charge_sungsu.jpg\" style=\"vertical-align: middle;\"> "+$.comma(map.busy_3_fri)+"원";
					sugiImg3+="<img alt=\"\" src=\"/camping/img/charge_sungsu.jpg\" style=\"vertical-align: middle;\"> "+$.comma(map.busy_3_sat)+"원";

				}
				if(busy_type=='0101'){
					sugiImg1+="</span>";
				}else if(busy_type=='0102'){
					sugiImg2+="</span>";
				}else if(busy_type=='0103'){
					sugiImg3+="</span>";
				}else if(busy_type=='0104'){
					sugiImg1+="</span>";
				}else if(busy_type=='0105'){
					sugiImg2+="</span>";
				}else if(busy_type=='0106'){
					sugiImg3+="</span>";
				}else if(busy_type=='0107'){
					sugiImg1+="</span>";
				}else if(busy_type=='0108'){
					sugiImg2+="</span>";
				}else if(busy_type=='0109'){
					sugiImg3+="</span>";
				}
				if("0" !=pm_per || "0" != pm_dc_m){
					sugiImg1 +="</s>";
					sugiImg2 +="</s>";
					sugiImg3 +="</s>";
				}
				//할인 있을경우
				if("0" !=pm_per || "0" != pm_dc_m){
					sugiImg1  += 
						"			<tr><td class=\"lineNone\">";
					sugiImg2  += 
						"			<tr><td class=\"lineNone\">";
					sugiImg3  += 
						"			<tr><td class=\"lineNone\">";
						sugiImg1+="<img alt=\"\" src=\"/camping/img/charge_sale.jpg\" style=\"vertical-align: middle;\"> ";
						sugiImg2+="<img alt=\"\" src=\"/camping/img/charge_sale.jpg\" style=\"vertical-align: middle;\"> ";
						sugiImg3+="<img alt=\"\" src=\"/camping/img/charge_sale.jpg\" style=\"vertical-align: middle;\"> ";
					if(busy_type=='0101'){
						sugiImg1+="<span class='sendPayColor'>";
					}else if(busy_type=='0102'){
						sugiImg2+="<span class='sendPayColor'>";
					}else if(busy_type=='0103'){
						sugiImg3+="<span class='sendPayColor'>";
					}else if(busy_type=='0104'){
						sugiImg1+="<span class='sendPayColor'>";
					}else if(busy_type=='0105'){
						sugiImg2+="<span class='sendPayColor'>";
					}else if(busy_type=='0106'){
						sugiImg3+="<span class='sendPayColor'>";
					}else if(busy_type=='0107'){
						sugiImg1+="<span class='sendPayColor'>";
					}else if(busy_type=='0108'){
						sugiImg2+="<span class='sendPayColor'>";
					}else if(busy_type=='0109'){
						sugiImg3+="<span class='sendPayColor'>";
					}
					if(busy_type=='0101' || busy_type=='0102' || busy_type=='0103'){//비수기
						if("0"!=pm_dc_m ){
							sugiImg1+=$.comma(Number(map.busy_1_base) - Number(pm_dc_m))+"원";
							sugiImg2+=$.comma(Number(map.busy_1_fri) - Number(pm_dc_m))+"원";
							sugiImg3+=$.comma(Number(map.busy_1_sat) - Number(pm_dc_m))+"원";
						}else{
							sugiImg1+=$.comma(Number(map.busy_1_base) - ( Number(map.busy_1_base) * (Number(pm_per) * 0.01) ))+"원";
							sugiImg2+=$.comma(Number(map.busy_1_fri) - ( Number(map.busy_1_fri) * (Number(pm_per) * 0.01) ))+"원";
							sugiImg3+=$.comma(Number(map.busy_1_sat) - ( Number(map.busy_1_sat) * (Number(pm_per) * 0.01) ))+"원";
						}
					}else if(busy_type=='0104' |busy_type=='0105' || busy_type=='0106'){//준수기
						if("0"!=pm_dc_m){
							sugiImg1+=$.comma(Number(map.busy_2_base) - Number(pm_dc_m))+"원";
							sugiImg2+=$.comma(Number(map.busy_2_fri) - Number(pm_dc_m))+"원";
							sugiImg3+=$.comma(Number(map.busy_2_sat) - Number(pm_dc_m))+"원";
						}else{
							sugiImg1+=$.comma(Number(map.busy_2_base) - ( Number(map.busy_2_base) * (Number(pm_per) * 0.01) ))+"원";
							sugiImg2+=$.comma(Number(map.busy_2_fri) - ( Number(map.busy_2_fri) * (Number(pm_per) * 0.01) ))+"원";
							sugiImg3+=$.comma(Number(map.busy_2_sat) - ( Number(map.busy_2_sat) * (Number(pm_per) * 0.01) ))+"원";
						}
					}else if(busy_type=='0107'||busy_type=='0108'||busy_type=='0109'){//성수기
						if("0"!=pm_dc_m){
							sugiImg1+=$.comma(Number(map.busy_3_base) - Number(pm_dc_m))+"원";
							sugiImg2+=$.comma(Number(map.busy_3_fri) - Number(pm_dc_m))+"원";
							sugiImg3+=$.comma(Number(map.busy_3_sat) - Number(pm_dc_m))+"원";
						}else{
							sugiImg1+=$.comma(Number(map.busy_3_base) - ( Number(map.busy_3_base) * (Number(pm_per) * 0.01) ))+"원";
							sugiImg2+=$.comma(Number(map.busy_3_fri) - ( Number(map.busy_3_fri) * (Number(pm_per) * 0.01) ))+"원";
							sugiImg3+=$.comma(Number(map.busy_3_sat) - ( Number(map.busy_3_sat) * (Number(pm_per) * 0.01) ))+"원";
						}
					}
					if(busy_type=='0101'){
						sugiImg1+="</span>";
					}else if(busy_type=='0102'){
						sugiImg2+="</span>";
					}else if(busy_type=='0103'){
						sugiImg3+="</span>";
					}else if(busy_type=='0104'){
						sugiImg1+="</span>";
					}else if(busy_type=='0105'){
						sugiImg2+="</span>";
					}else if(busy_type=='0106'){
						sugiImg3+="</span>";
					}else if(busy_type=='0107'){
						sugiImg1+="</span>";
					}else if(busy_type=='0108'){
						sugiImg2+="</span>";
					}else if(busy_type=='0109'){
						sugiImg3+="</span>";
					}
				}
				sugiImg1+=
					"			</td></tr>"+
					"		</table>";
				sugiImg2+=
					"			</td></tr>"+
					"		</table>";
				sugiImg3+=
					"			</td></tr>"+
					"		</table>";
				var fromtoList = "";
				for(var j=1; j<= Number(map.fromto);j++){
					if($("#gigan").val() == j){
						fromtoList+="			<option value=\""+j+"\" selected='selected'>"+j+"박"+(j+1)+"일</option>";
					}else{
						fromtoList+="			<option value=\""+j+"\">"+j+"박"+(j+1)+"일</option>";	
					}
				}
				
// 				use_man_cnt:"${map.use_man_cnt}",
// 				use_max_cnt:"${map.use_max_cnt}",

				var manList = "";
				var manList1 = "";
				for(var j=0; j<= Number(map.use_max_cnt);j++){
					if(map.use_man_cnt == j){
						manList+="			<option value=\""+j+"\" selected='selected'>"+j+"</option>";
					}else{
						manList+="			<option value=\""+j+"\">"+j+"</option>";	
					}
					manList1+="			<option value=\""+j+"\">"+j+"</option>";
				}
				
				reservationHtml+="<tr class='redt'>"+
				"	<td class=\"calBlue\">"+map.room_nm+"</td>"+
				"	<td class=\"\">${fn:substring(reservation_dt,0,4)}년 ${fn:substring(reservation_dt,4,6)}월 ${fn:substring(reservation_dt,6,8)}일</td>"+
				"	<td class=\"\">"+
				"		<select name='rsv_days'>"+
				fromtoList+
				"		</select>"+
				"	</td>"+
				"	<td style=\"padding-left:0px;\">"+
				"		<table class=\"tbReservation\" style=\"width: 100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"+
				"			<tr class='shortH'>"+
				"				<td class=\"\">성인</td>"+
				"				<td class=\"\">아동</td>"+
				"			</tr>"+
				"			<tr class='shortH'>"+
				"				<td class=\"\">"+
				"					<select name='man_cnts'>"+
				manList+
				"					</select>"+
				"				</td>"+
				"				<td class=\"\">"+
				"					<select name='chi_cnts'>"+
				manList1+
				"					</select>"+
				"				</td>"+
				"			</tr>"+
				"		</table>								"+
				"	</td>"+
				"	<td style=\"padding-left:0px;\">"+sugiImg1+"</td>"+
				"	<td style=\"padding-left:0px;\">"+sugiImg2+"</td>"+
				"	<td style=\"padding-left:0px;\">"+sugiImg3+"</td>"+
				"</tr>";
			}else{
				html+="<div id='pointImg_"+map.pr_no+"' onclick=\"reservationAdd('"+map.pr_no+"','Y');\" class='delPoint' style=\"position: absolute;top: "+yCoord+"px;left:"+xCoord+"px;\"><img src=\"/usr/images/sim_1.png\" style=\"opacity:.8;filter:alpha(opacity=80);\" /></div>";	
			}
		}
	}
	$("body").append(html);
	
	$(".redt").remove();
	$("#r_list").append(reservationHtml);
	
}

//연박설정
function resetChange(){
	for(var i=0; i < rooms.length; i ++){
		var map = rooms[i];
		if("Y"==map.chk_yn){
			map.chk_yn="";
		}
	}
	showPoint();
}

//예약설정
function reservationAdd(pr_no,yn){
	if("N"==yn){
		alert("예약할수 없습니다");
		return false;
	}
	
	var reservationCnt =0;
	for(var i=0; i < rooms.length; i ++){
		var map = rooms[i];
		if("Y"==map.chk_yn){

			if(pr_no == map.pr_no){
				map.chk_yn="";
				showPoint();
				return false;
			}else{
				reservationCnt++;	
			}
			
		}
	}
	if(reservationCnt>2){
		alert("예약은 3개까지만 할수있습니다");
		return false;
	}
	
	for(var i=0; i < rooms.length; i ++){
		var map = rooms[i];
		if(pr_no==map.pr_no){
			map.chk_yn = "Y";
			showPoint();
			return false;
		}
	}
}

//요금 부가서비스 설정
function showMoney(){
	var pr_nos=[];
	for(var i=0; i < rooms.length; i ++){
		var map = rooms[i];
		if("Y"==map.chk_yn){
			pr_nos.push(map.pr_no);
		}
	}
	if(pr_nos.length==0){
		alert("예약하실곳을 선택하세요");
		return false;
	}

	for(var i =0; i< pr_nos.length;i++){
		$("#frmSave").append("<input name=\"pr_nos\" value=\""+pr_nos[i]+"\" type=\"text\" />");
	}
	
	$("select[name='rsv_days']").each(function (){
		$("#frmSave").append("<input name=\"rsv_days\" value=\""+$(this).val()+"\" type=\"text\" />");
	});
	$("select[name='man_cnts']").each(function (){
		$("#frmSave").append("<input name=\"man_cnts\" value=\""+$(this).val()+"\" type=\"text\" />");
	});
	$("select[name='chi_cnts']").each(function (){
		$("#frmSave").append("<input name=\"chi_cnts\" value=\""+$(this).val()+"\" type=\"text\" />");
	});

	$("#frmSave").submit();
}

$(document).ready(function(){
	$( "#reservation_dt" ).datepicker({
			dateFormat: 'yy-mm-dd',
	 		changeMonth: true,
	 		changeYear: true,
	 		showOn: 'button',
	 		buttonImageOnly: true,
	 		buttonImage: "/pmgr/images/icon_calendar.gif"
	 	}).change(function(){changeDate();});
});

function changeDate(){
	location.href="./petc0101Q.do?p_id=${param.p_id}&reservation_dt="+$("#reservation_dt").val().replace(/-/g, '')+"&pg_no=${param.pg_no}";
}

function goNextMonth(nextNum){
	var nDt = new Date();
	nDt.set({year:${fn:substring(reservation_dt,0,4)},month:(Number(${fn:substring(reservation_dt,4,6)})-1),day:Number(${fn:substring(reservation_dt,6,8)})});
	nDt.addMonths(nextNum);

	var nowDt =new Date();
// 	var nDt = new Date();
	if(Number(nowDt.toString("yyyyMMdd")) > Number(nDt.toString("yyyyMMdd"))){
		alert("오늘 이전자료는 선택할수 없습니다.");
		return false;
	}
	location.href="./petc0101Q.do?p_id=${param.p_id}&reservation_dt="+nDt.toString("yyyyMMdd")+"&pg_no=${param.pg_no}";
}
</script>

<p>이미지위에 마우스를 올리시면 예약 가능한 사이트가 표시됩니다.<br>
			<img alt="" src="/camping/img/img_r_r.gif">	예약가능 
				<img alt="" src="/camping/img/img_r_i.gif"> 예약진행중 
				<img alt="" src="/camping/img/img_r_o.gif"> 예약완료
			</p>
			
			<table style="width: 100%">
				<tr>
					<td colspan="7" style="text-align: center;padding-left: 250px;">
						<div>
							<a href="#" onclick="goNextMonth(-1)"><img alt="" src="/camping/img/calendar_arrow_l.jpg"  style="vertical-align:top; padding-top: 12px;padding-right: 10px;"></a>
							<strong style="font-size: 25px;font-weight: bold;font-family: Arial Black">${fn:substring(reservation_dt,0,4)}년 ${fn:substring(reservation_dt,4,6)}월 ${fn:substring(reservation_dt,6,8)}일</strong>
							<input style="display: none;" name="reservation_dt" id="reservation_dt" value="${fn:substring(reservation_dt,0,4)}-${fn:substring(reservation_dt,4,6)}-${fn:substring(reservation_dt,6,8)}" size="10"/>
							
							<a href="#" onclick="goNextMonth(1)"><img alt="" src="/camping/img/calendar_arrow_r.jpg" style="vertical-align:top; padding-top: 12px;padding-left : 10px;"></a>
							<div style="padding-left: 0px;float: right;padding-top: 19px;">
							선택구역 : <strong style="color: #ff9f52; ">B구역(파쇄석)</strong>,
							기간 : 
								<select id="gigan" onchange="resetChange();">
									<option value="1">1박2일</option>
									<option value="2">2박3일</option>
									<option value="3">3박4일</option>
									<option value="4">4박5일</option>
									<option value="5">5박6일</option>
									<option value="6">6박7일</option>
									<option value="7">7박8일</option>
								</select>
							</div>
						</div>
					</td>
				</tr>
			</table>
			
			<table style="width: 100%;margin-top: 10px;" border="1" cellspacing="6" cellpadding="1" bgcolor="#edecec">
				<tr>
					<td>
						<img id="back_img" alt="" src="${rooms[0].back_img}" border="0">
					</td>
				</tr>
			</table>
			
			<table class="" style="margin-top: 10px;width: 100%;" border="1" cellspacing="0" cellpadding="3" bgcolor="#ffffff">
				<tr>
					<td style="border: 1px solid #f6f4f5;">
						<table class="tbReservation bold" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
							<colgroup>
								<col width="300">
								<col width="130">
								<col width="100">
								<col width="200">
								<col width="120">
								<col width="120">
								<col width="120">
							</colgroup>
							<tbody id="r_list">
							<tr>
								<th class="back_c_gray">선택사이트</th>
								<th class="back_c_gray">이용일자</th>
								<th class="back_c_gray">기간선택</th>
								<th class="back_c_gray">이용인원</th>
								<th class="back_c_gray">주중</th>
								<th class="back_c_gray">금요일</th>
								<th class="back_c_gray">주말(토)<br>공휴일전날</th>
							</tr>
							</tbody>
						</table>
					</td>
				</tr>
			</table>
			
			<table style="width: 100%;margin-top: 10px;">
				<tr>
					<td align="center" style="text-align: center;">
						<a href="#" onclick="history.back();"><img alt="" src="/camping/img/btn_back.gif"></a>
						<a href="#" onclick="showMoney();"><img alt="" src="/camping/img/btn_reservation.gif" ></a>
					</td>
				</tr>
			</table>
			
<div id="aa" style="position: absolute; top: 30; left: 0; background-color: aqua; display: none;">
	<form id="frmSave" action="./petc0200Q.do" method="post">
		<input name="p_id" value="${param.p_id}" type="text" /> 
		<input name="pg_no" value="${param.pg_no}" type="text" /> 
		<input name="reservation_dt" value="${reservation_dt}" type="text" />
	</form>
</div>
